import React, { Component } from "react";
import { connect } from "react-redux";
import MainLayout from "../../../../component/mainLayout/mainLayout";
import "./WithdrawAccount.scss";
import { InputItem, List, Toast, Modal } from "antd-mobile";
import yhTools from "../../../../tools/yh";
import { channelCode, InterfaceG } from "../../../../config/Config";
import { checkTool } from "plugin-tool-check";
import SendMSGCode from "../../../../component/sendMSGCode/sendMSGCode";

const Item = List.Item;

class withdrawAccount extends Component {
	constructor(props) {
		super(props);
		// let pageParams = JSON.parse(this.props.match.params.data);
		this.state = {
			loadStatus: "1", // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）

			errorTip: "",
			showError: "1",
			inputValue: "",
			initData: {
				amount: "",
				cardAmount: "",
				cardDayAmount: "",
				cardName: "",
				cardNo: "",
				cardUrl: "",
				channelCode: "",
				channelName: "",
				electronicCardNo: "",
				telNo: ""
			},

			showMsgBox: false, //控制是否显示发送验证码弹窗
			messageSerialNumber: "", //发送短信成功后返回的流水号
			sendSuccessPhone: "" //发送短信成功后返回的手机号
		};
		this.alertModal = undefined; // 弹窗
	}

	//初始化数据
	componentDidMount() {
		let objs = {
			url: InterfaceG.electronicAmount,
			params: {
				channelCode: channelCode,
				type: "1" // 提现
			},
			_alertShow: false
		};
		yhTools.request(objs).then(resp => {
			if (resp.code == "0") {
				this.setState({
					initData: {
						amount: resp.data.amount,
						cardAmount: resp.data.cardAmount,
						cardDayAmount: resp.data.cardDayAmount,
						cardName: resp.data.cardName,
						cardNo: resp.data.cardNo.slice(resp.data.cardNo.length - 4),
						cardUrl: resp.data.cardUrl,
						channelCode: resp.data.channelCode,
						channelName: resp.data.channelName,
						electronicCardNo: resp.data.electronicCardNo.slice(
							resp.data.electronicCardNo.length - 4
						),
						telNo: resp.data.telNo
					}
				});
			} else {
				Toast.info(resp.message, 2);
			}
		});
	}

	checkValue(value) {
		console.log(75, value);
		if (value == "") {
			this.setState({
				errorTip: "",
				inputValue: value
			});
			return;
		}

		if (!checkTool.isMoney({ valueParams: value })) {
			if (this.state.errorTip != "请输入正确的金额") {
				this.setState({
					errorTip: "请输入正确的金额",
					inputValue: value
				});
			}
		} else if (Number(value) > Number(this.state.initData.amount)) {
			this.setState({
				errorTip: "余额不足，请重新输入",
				inputValue: value
			});
			return;
		} else if (Number(value) > Number(this.state.initData.cardAmount)) {
			this.setState({
				errorTip: "金额已超单笔最大提现额度" + this.state.initData.cardAmount,
				inputValue: value
			});
			return;
		} else {
			this.setState({
				errorTip: "",
				inputValue: value
			});
		}
	}

	inputAll() {
		if (Number(this.state.inputValue) != Number(this.state.initData.amount)) {
			this.setState({
				errorTip: "",
				inputValue: this.state.initData.amount
			});
		}

		if (
			Number(this.state.initData.amount) >
			Number(this.state.initData.cardAmount)
		) {
			this.setState({
				errorTip: "金额已超单笔最大提现额度" + this.state.initData.cardAmount
			});
		}
	}

	//发送验证码
	tixian() {
		let value = this.state.inputValue;
		if (value == "") {
			Toast.info("请输入提现金额");
			return;
		}
		if (!checkTool.isMoney({ valueParams: value })) {
			if (this.state.errorTip === "请输入正确的金额") {
				Toast.info("请输入正确的金额");
				return;
			}
		} else if (Number(value) > Number(this.state.initData.amount)) {
			Toast.info("余额不足，请重新输入");
			return;
		}

		if (value === "0") {
			Toast.info("提现金额不能为0");
			return;
		}
		if (Number(value) > Number(this.state.initData.cardAmount)) {
			Toast.info("金额已超单笔最大提现额度" + this.state.initData.cardAmount);
			return;
		}
		this.sendYzm();
	}
	//短信验证码验证接口
	sendYzm() {
		const _this = this;
		let objs = {
			url: InterfaceG.eleRechargeSendSms,
			params: {
				channelCode: channelCode
			},
			_alertShow: false
		};
		Toast.loading("加载中...", 100);
		yhTools.request(objs).then(res => {
			Toast.hide();
			if (res.code == "0") {
				_this.sendCode.countdown();
				_this.setState({
					sendSuccessPhone: res.data.sendSuccessPhone,
					messageSerialNumber: res.data.messageSerialNumber,
					showMsgBox: true //显示验证码
				});
			} else {
				Toast.info(res.message, 2);
			}
		});
	}
	//提交回调
	submitCode(code) {
		const { statePrame = {} } = this.props.location.state || {};
		const { backPath } = statePrame;
		console.log("backPath===", backPath);
		if (code == "" || code.toString().length < 6) {
			Toast.info("请输入六位验证码", 2);
			return;
		}
		let _that = this;
		let objs = {
			url: InterfaceG.eleWithdraw,
			params: {
				channelCode: channelCode,
				amount: this.state.inputValue,
				messageSerialNumber: this.state.messageSerialNumber, //银行的短信流水号
				activeCode: code
			},
			_alertShow: false
		};
		Toast.loading("加载中...", 100);
		yhTools.request(objs).then(res => {
			Toast.hide();
			if (res.code === "0") {
				_that.setState({
					showMsgBox: false
				});
				this.alertModal = Modal.alert(
					"提现处理中",
					"提现处理中，请稍后查看账户记录",
					[
						{
							text: "我知道了",
							onPress: () => {
								let isXhbWhite = sessionStorage.getItem('isXhbWhite');
								yhTools.clearPageCache();
								//有传backPath返回路径的，返回该路径，没传这个返回路径的，判断是否白名单的，是的话返回xhb新首页，不是的话返回老首页
								this.props.history.push({
									pathname: backPath ? backPath : (isXhbWhite && isXhbWhite == '1') ? "/xhbBalanceAccountOpened" : "/walletHome"
								});
							}
						}
					]
				);
			} else {
				Toast.info(res.message, 2);
			}
		});
	}
	//关闭验证码弹框
	closeSendModal() {
		this.setState({
			showMsgBox: false
		});
	}
	render() {
		const headerParams = {
			header: {
				title: "提现",
				goBackAction: () => {
					if (this.alertModal) {
						this.alertModal.close();
					}
					this.props.history.goBack();
				}
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles,
			loadStatus: this.state.loadStatus // （ '0'：数据加载中，'1'：加载完成，'2'：加载失败）
		};
		let { sendSuccessPhone, showMsgBox } = this.state;
		return (
			<MainLayout pageParams={headerParams}>
				<div className="operate-account-page">
					<div className="account-content">
						<div className="account-area">
							<div className="account-area-left">
								<img
									className="bank-name-img"
									src={require("../../../../images/bankPage/icon-bank-name.png")}
								/>
								<div className="amount-area">
									<div>
										电子账户 | 尾号{this.state.initData.electronicCardNo}
									</div>
								</div>
							</div>
							<div className="account-area-right">
								<div className="bank-account">
									余额：{this.state.initData.amount}
								</div>
								<img
									className="bank-img"
									src={require("../../../../images/bankPage/icon-bank.png")}
								/>
							</div>
						</div>
						<List>
							<InputItem
								placeholder="请输入提现金额"
								type="money"
								maxLength="9"
								value={this.state.inputValue}
								moneyKeyboardAlign="left"
								onChange={this.checkValue.bind(this)}
								clear
							>
								¥
							</InputItem>
							<div
								className={
									Number(this.state.inputValue) ==
										Number(this.state.initData.amount)
										? "all-in all-in-gray"
										: "all-in"
								}
								onClick={this.inputAll.bind(this)}
							>
								全部提现
							</div>
						</List>
					</div>
					<div className="error-tip error-tip-show">{this.state.errorTip}</div>
					<div className="bank-area">
						<List>
							<Item>收款银行卡</Item>
							<Item thumb={this.state.initData.cardUrl}>
								<div>
									<div>
										{this.state.initData.cardName +
											"(" +
											this.state.initData.cardNo +
											")"}
									</div>
									<div className="bankTip">
										单笔提现上限{this.state.initData.cardAmount}元
									</div>
								</div>
							</Item>
						</List>
					</div>
					<div className="btn-common" onClick={this.tixian.bind(this)}>
						提现
					</div>
					<div className="area-tip">
						预计在2小时内到账，具体到账时间以收款方银行入账时间为准。
					</div>
				</div>
				<SendMSGCode
					ref={ref => {
						this.sendCode = ref;
					}}
					getYZMCode={this.sendYzm.bind(this)}
					sendSuccessPhone={sendSuccessPhone}
					submitCode={this.submitCode.bind(this)}
					closeSendModal={this.closeSendModal.bind(this)}
					showMsgBox={showMsgBox}
					seconds={60}
				/>
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps() {
	return {};
}

const WithdrawAccountPage = connect(
	mapStateToProps,
	mapDispatchToProps
)(withdrawAccount);
export default WithdrawAccountPage;
